<template>
    <el-header>
        <div>实验室管理系统</div>
        <div>
            <span style="line-height: 40px;">
                欢迎{{user.username}}回来
            </span>
            <el-dropdown>
                <el-avatar :size="40" :src="circleUrl" />
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>{{ user.role.rolename }}</el-dropdown-item>
                        <el-dropdown-item @click="handleExit">退出</el-dropdown-item>
                        
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <!-- <button @click="handleExit">推出</button> -->
    </el-header>
</template>

<script setup>
import {useUserStore} from '@/store/useUserStore'
import {useRouterStore} from '@/store/useRouterStore'
import {useRouter} from 'vue-router'

const {changeUser,user} = useUserStore()
const {changeRouter} = useRouterStore()
const router = useRouter()
const circleUrl = '/avatar.png'
const handleExit = ()=>{
    //传一个空的对象覆盖掉,望周知
    changeUser({})


    changeRouter(false)
    //跳转到登录
    router.push("/login")
}
</script>

<style lang="scss" scoped>
.el-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0d47a1;
    color: white;
}
</style>